<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>index</title>

    <!-- ********** core ********** -->
    <link rel="stylesheet" href="./gxqcs/bootstrap.min.css" />
    <link rel="stylesheet" href="./gxqcs/common.css" />
    <link rel="stylesheet" href="./gxqcs/index.css" />
    <!-- <link rel="stylesheet" href="https://aszx0413.gitee.io/assets/css/index.css" /> -->
    <script src="http://lib.baomitu.com/twitter-bootstrap/5.3.2/js/bootstrap.min.js"></script>

    <!-- ********** icon ********** -->
    <link
      rel="stylesheet"
      href="//qn.uwitkey.com/assets/fontawesome6.2.0/css/all.css"
    />

    <!-- lenis -->
    <script src="https://unpkg.com/@studio-freight/lenis@1.0.33/dist/lenis.min.js"></script>

    <!-- ********** swiper ********** -->
    <link
      href="https://cdn.bootcdn.net/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css"
      rel="stylesheet"
    />

    <style>
      .w-2r {
        width: 2rem;
      }
      .bg-sideF img {
        width: 130px;
      }
      .bg-sideF .abs {
        opacity: 0;
        visibility: hidden;
      }
      .bg-sideF .mb-2 .bg-side:hover ~ .abs {
        opacity: 1;
        visibility: visible;
      }

      .bg-sideF .mb-2:nth-of-type(1) .abs {
        left: -275%;
        top: 10%;
      }

      .bg-sideF .mb-2:nth-of-type(2) .abs {
        left: -240%;
        top: -20%;
      }
      .bg-sideF .mb-2:nth-of-type(3) .abs {
        left: -240%;
        top: -20%;
      }

      .bg-sideF .mb-2:nth-of-type(1) .bg-side {
        background: url(//qn1.10soo.net/assets24/20241030105125.svg);
      }
      .bg-sideF .mb-2:nth-of-type(2) .bg-side {
        background: url(//qn1.10soo.net/assets24/20241030105153.svg);
      }
      .bg-sideF .mb-2:nth-of-type(3) .bg-side {
        background: url(//qn1.10soo.net/assets24/20241030105136.svg);
      }
      .bg-sideF .mb-2:nth-of-type(4) .bg-side {
        background: url(//qn1.10soo.net/assets24/20241030105206.svg);
      }
      .bg-sideF .mb-2:nth-of-type(1) .bg-side:hover {
        background: url(//qn1.10soo.net/assets24/20241030105121.svg);
      }
      .bg-sideF .mb-2:nth-of-type(3) .bg-side:hover {
        background: url(//qn1.10soo.net/assets24/20241030105130.svg);
      }
      .bg-sideF .mb-2:nth-of-type(2) .bg-side:hover {
        background: url(//qn1.10soo.net/assets24/20241030105144.svg);
      }
      .bg-sideF .mb-2:nth-of-type(4) .bg-side:hover {
        background: url(//qn1.10soo.net/assets24/20241030105200.svg);
      }
    </style>
  </head>
  <body>
    <!-- header -->
    <!-- pc顶部导航 -->
    <header class="d-none d-md-block">
      <div class="bg-header">
        <div class="container d-flex align-items-center h-100">
          <img src="//qn1.10soo.net/assets24/202410111534830.svg" alt="" />
        </div>
      </div>
      <div class="bg-red-4 position-relative">
        <div class="container">
          <ul class="d-flex list-unstyled mb-0">
            <li class="flex-fill py-4 nav-item hover-bg-danger">
              <a
                class="fs-3 text-white d-block text-center border-end"
                href="/html/index.html"
                >首页</a
              >
              <div
                class="bg-white position-absolute w-100 top-100 start-0 nav-wrap z-2"
              ></div>
            </li>
            <li class="flex-fill py-4 nav-item hover-bg-danger">
              <a class="fs-3 text-white d-block text-center border-end" href="">
                关于总会
              </a>
              <div
                class="bg-white position-absolute w-100 top-100 start-0 nav-wrap z-2"
              >
                <ul class="d-flex list-unstyled container ps-16">
                  <li class="me-16">
                    <a
                      class="py-4 fs-2 d-block text-black text-center hover-text-red-4"
                      href=""
                      >总会介绍</a
                    >
                  </li>
                  <li class="me-16">
                    <a
                      class="py-4 fs-2 d-block text-black text-center hover-text-red-4"
                      href="/html/about.html"
                      >关于总会</a
                    >
                  </li>
                  <li class="me-16">
                    <a
                      class="fs-2 py-4 d-block text-black text-center hover-text-red-4"
                      href=""
                      >总会章程</a
                    >
                  </li>
                  <li class="me-16">
                    <a
                      class="fs-2 py-4 d-block text-black text-center hover-text-red-4"
                      href=""
                      >组织架构</a
                    >
                  </li>
                  <li class="me-16">
                    <a
                      class="fs-2 py-4 d-block text-black text-center hover-text-red-4"
                      href=""
                      >理事会成员</a
                    >
                  </li>
                  <li class="me-16">
                    <a
                      class="fs-2 py-4 d-block text-black text-center hover-text-red-4"
                      href=""
                      >捐赠方式</a
                    >
                  </li>
                </ul>
              </div>
            </li>
            <li class="flex-fill py-4 hover-bg-danger">
              <a
                class="fs-3 text-white d-block text-center border-end"
                href="/html/news_list.html"
                >慈善动态</a
              >
            </li>
            <li class="flex-fill py-4 hover-bg-danger">
              <a
                class="fs-3 text-white d-block text-center border-end"
                href="/html/project_list.html"
                >慈善项目</a
              >
            </li>
            <li class="flex-fill py-4 hover-bg-danger">
              <a
                class="fs-3 text-white d-block text-center border-end"
                href="/html/notice_list.html"
                >信息公开</a
              >
            </li>
            <li class="flex-fill py-4 hover-bg-danger">
              <a class="fs-3 text-white d-block text-center border-end" href=""
                >志愿服务</a
              >
            </li>
            <li class="flex-fill py-4 hover-bg-danger">
              <a class="fs-3 text-white d-block text-center" href=""
                >联系我们</a
              >
            </li>
          </ul>
        </div>
      </div>
    </header>

    <!-- 移动端顶部导航 -->
    <div class="d-md-none py-3 position-relative">
      <img
        class="h-3"
        src="//qn1.10soo.net/assets24/202410111534830.svg"
        alt=""
      />
      <div class="hamburger-menu">
        <input id="menu__toggle" type="checkbox" />
        <label class="menu__btn z-3" for="menu__toggle">
          <span></span>
        </label>

        <ul class="menu__box z-2">
          <li><a class="menu__item" href="#">首页</a></li>
          <li><a class="menu__item" href="#">关于总会</a></li>
          <li><a class="menu__item" href="#">慈善动态</a></li>
          <li><a class="menu__item" href="#">信息公开</a></li>
          <li><a class="menu__item" href="#">志愿服务</a></li>
          <li><a class="menu__item" href="#">联系我们</a></li>
        </ul>
      </div>
    </div>

    <div
      class="position-fixed top-25 end-0 bg-white shadow-lg pt-8 px-6 text-center rounded-pill z-2 bg-sideF tran_1 d-none d-md-inline-block"
    >
      <div class="mb-2 mb-xl-8 position-relative">
        <div
          class="w-4r bg-side ratio ratio-1x1 mb-xl-3 mx-auto rounded-circle bg-stretch tran_0_5 shadow-lg"
        ></div>
        <span class="text-secondary">电话咨询</span>
        <div
          class="position-absolute abs bg-gray-2 fs-1 py-4 px-6 rounded-pill tran_0_5 shadow-lg"
        >
          0311-88880000 
        </div>
      </div>
      <div class="mb-2 mb-xl-8 position-relative">
        <div
          class="w-4r bg-side ratio ratio-1x1 mb-xl-3 mx-auto rounded-circle bg-stretch tran_0_5 shadow-lg"
        ></div>
        <span class="text-secondary">微信公众号</span>
        <div
          class="position-absolute abs text-white rounded-1 tran_0_5 shadow-lg"
        >
          <img
            src="//qn1.10soo.net/assets24/20241030112502.jpg"
            alt=""
            srcset=""
          />
        </div>
      </div>
      <div class="mb-2 mb-xl-8 position-relative">
        <div
          class="w-4r bg-side ratio ratio-1x1 mb-xl-3 mx-auto rounded-circle bg-stretch tran_0_5 shadow-lg"
        ></div>
        <span class="text-secondary">抖音</span>
        <div
          class="position-absolute abs text-white rounded-1 tran_0_5 shadow-lg"
        >
          <img
            src="//qn1.10soo.net/assets24/20241030112456.jpg"
            alt=""
            srcset=""
          />
        </div>
      </div>
      <div class="mb-2 mb-xl-8 toTop">
        <div
          class="w-4r bg-side ratio ratio-1x1 mb-xl-3 mx-auto rounded-circle bg-stretch tran_0_5 shadow-lg"
        ></div>
        <span class="text-secondary">回到顶部</span>
      </div>
    </div>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11.1.14/swiper-bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="./js/common.js"></script>
    <script>
      var swiper = new Swiper(".mySwiper", {
        pagination: {
          el: ".mySwiper .swiper-pagination",
          clickable: true,
        },
        autoplay: true,
      });
      var swiper2 = new Swiper(".mySwiper2", {
        slidesPerView: 3,
        spaceBetween: 32,
        freeMode: true,
        navigation: {
          nextEl: ".button-next",
          prevEl: ".button-prev",
        },
        breakpoints: {
          0: {
            //当屏幕宽度大于等于768
            slidesPerView: 1.5,
            spaceBetween: 20,
          },
          768: {
            //当屏幕宽度大于等于768
            slidesPerView: 2.5,
            spaceBetween: 20,
          },
          1280: {
            //当屏幕宽度大于等于1280
            slidesPerView: 3,
            spaceBetween: 32,
          },
        },
      });
    </script>
  </body>
</html>
